<template>
	<div>
		<div v-if="payNum>0" class="goback" @click="$router.push({name: 'home'})"></div>
		<div>
			<div class="pay_success">
				<div class="okImg"><img src="../../images/ok.gif"></div>
				<p>恭喜，支付成功</p>
        <!-- <div v-if="orderInfo.couponInf" class="activity_title">
          <p>成功参加“{{activityInfo[0].actName}}”</p>
          <p>送你一张{{activityInfo[0].couponType|couponTp}}，请去“我的-<span>商券</span>”里查看</p>
        </div> -->
				<div class="activity_title" v-if="activityInfo.length">
          <p>恭喜你，满足活动要求</p>
          <p>获得{{activityInfo.length | num}}张优惠券</p>
        </div>
        <a @click="commentBtn(orderInfo)" v-if="buyState">趁热打铁，去评一下</a>
        <div class="look_back">
          <a @click="$router.push({name: 'home'})">知道啦，退下吧</a>
        </div>
			</div>
      <!-- 电子券信息 -->
      <div class="exchange_card" v-if="couponParam">
        <div class="back_card">
          <span class="left">参与活动所得（{{activityInfo.length}}张）</span>
          <a @click="lookCard" class="right">查看我的商券<em class="iconfont icon-right right"></em></a>
        </div>
        <div class="cardBg1">
            <div class="bgLine"><img src="../../images/cardBg_03.png"></div>
            <div class="cardBg2">
                <div class="card_tit clearfix">
                    <span class="right">有效期：{{couponParam.validatyEnd | strDate(3)}}</span>
                      <p>{{couponParam.mchtName}}</p>
                </div>
								<div class="couponDiv">
									<coupon-denomination :item="couponParam"></coupon-denomination>
								</div>
                <div class="card_info">
                    <div class="card_name">{{couponParam.couponName}}</div>
                    <div class="coupon_info_item">
                        <star :couponComScore="couponParam.comScore"></star>
                        <p class="info_pad">{{couponParam.comNum}}条</p>
                    </div>

                    <div class="coupon_info_item color_gray">
                        已售出   {{couponParam.soldnum}}   &nbsp;&nbsp;&nbsp;已使用   {{couponParam.usednum}}
                    </div>
                </div>
            </div>
            <p class="card_btn notice">
              <!-- <span class="left">使用须知</span>
              <em class="iconfont icon-right right"></em> -->
							<span v-if="couponParam.disableDate">{{couponParam.disableDate|businessDay}}不可以使用</span>
							<span>使用时间：{{couponParam.userTime|timeAnalysis}}{{couponParam.useTime}}</span>
							<span v-if="couponParam.restricted">满{{couponParam.restricted}}元可使用</span>
            </p>
        </div>
      </div>
      <!-- 电子券信息E -->
			<div class="pay_success_cont">
				<p>
					<span class="left">支付金额：</span>
					<span class="right">{{payNum | formatMoney}}元</span>
				</p>
				<div class="pay_coupon" v-if="buyState">
					<div class="pay_coupon_tit">
						<span class="left">使用电子券：</span>
						<span class="right">共{{useCouponNum}}张</span>
					</div>
					<div class="pay_coupon_cont clearfix">
            <ul class="right">
              <li class="left" v-for="item in orderInfo.couponNum">
								<div class="couponDiv">
									<coupon-denomination :item="usedOrderInfo.couponNoInfo"></coupon-denomination>
								</div>
              </li>
            </ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 奖励显示弹框 -->
		<reward-modal v-if="shareInfo" @close="hiddenShareInfo" :stateUnder="stateUnder" :moneyUnder1="moneyUnder1" :moneyUnder2="moneyUnder2" :money="usrAmt" :nums="nums" type="use" returnHistory='true'></reward-modal>
	</div>
</template>
<script>
import RewardModal from 'src/componentes/global/reward/index.vue'
import star from '../../componentes/global/star.vue'
import getData from '../../service/getData.js'
import getData2 from '../../service/getData2.js'
import * as types from '../../vuex/types.js'
import {Storage} from 'src/utils/storage.js'
import {
  mapState
} from 'vuex'
import {
    Toast,
    Indicator
} from 'mint-ui';

export default {
  components: {
      star,
		  RewardModal,
  },
  data() {
    return {
			shareInfo: false,
			usrAmt:0,
      orderInfo: '',
      orderCoupon: [],
      type: 'small',
      orderCouponItem: '',
      couponNoInfo:'',
      activityInfo:'',
      couponParam:'',
      lookState:false,
	  payNum:Storage.get("hasPayOrder").payNum,
	  useCouponNum:Storage.get("hasPayOrder").couponNoInfo==''?0:1,
	  usedOrderInfo:'',
	  nums:1,
	  moneyUnder1:'',
	  moneyUnder2:'',
	  stateUnder:false,
	  buyState:Storage.get("hasPayOrder").buyState?false:true

    }
  },
  beforeRouteLeave(to, from, next) {
  	if(window.isBack){
  		window.isBack =false
  		this.$router.push({path:"/home"})
  	}
	next()
  },
  created: async function() {

    // var orderCont=Storage.get("hasPayOrder",true);
    var orderCont = Storage.get("hasPayOrder")||{couponNoInfo:''};
    console.log(orderCont)
    this.usedOrderInfo=Storage.get("hasPayOrder")||{couponNoInfo:''};
    if (orderCont.couponNoInfo) {
      this.couponNoInfo = Storage.get("hasPayOrder").couponNoInfo;
    }
    this.usrAmt=(orderCont.market+orderCont.market2).toFixed(2)
		if (orderCont.market==0&&orderCont.market2==0) {
			this.shareInfo = false

		}else if(orderCont.market>0&&orderCont.market2>0){
			this.shareInfo = true
			this.moneyUnder1=orderCont.market
			this.moneyUnder2=orderCont.market2
			this.nums=2
			this.stateUnder=true
		}else{
			this.shareInfo = true
			this.stateUnder=false
		}
    var me = this;
    // 获取订单信息
    var data = await getData2.orderDetail({
      method: 'post',
      data: {
//      couponNo: orderCont.couponNo,
        mchtId: orderCont.mchtId,
        orderId: orderCont.orderId,
        usrId: me.userInfo.usrId
      }
    })
    if (data.respCode == '00') {
      if (data.content.orderDetail) {
        me.orderInfo = data.content.orderDetail[0];
//				me.payNum = data.content.orderDetail[0].amt
        me.orderCoupon = data.content.couponList;
        me.orderCouponItem = data.content.couponList[0];
        if (data.content.orderDetail[0].couponInf) {
          me.activityInfo=JSON.parse(data.content.orderDetail[0].couponInf);
        }
      }
    }else{
      Toast({
          message: data.errorInfo,
          duration: 1000
      });
    }
    //获取券信息
    if(me.activityInfo){
			// console.log(me.activityInfo[0].couponInf);
      var activityArr = me.activityInfo[0].couponInf.split(',')
      getData.getCouponInfo({"method":'post',data:{"couponId":activityArr[1],"mchtId":activityArr[0],"seqNo":'',"usrId":me.userInfo.usrId, "usrPicId":''}}).then(rep => {
          me.couponParam = rep.content
					me.couponParam.type = me.couponParam.couponType
      })
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
    })
  },
  mounted: async function() {
    var _this=this;
    this.$nextTick(function() {
      // let goHomeBack=function(e){
      //   // console.log(e.oldURL);
      //   if (!_this.lookState) {
      //     _this.$router.push({name:"home"});

      //     _this.lookState = true
      //     window.removeEventListener('hashchange', goHomeBack, false);
      //   }
      // }
      // window.addEventListener('hashchange', goHomeBack, false);
    })
  },
  methods:{
		hiddenShareInfo(){
			this.shareInfo = false;
		},
    // 跳转评论
    commentBtn:function(en){
      var orderCont = Storage.get("hasPayOrder");
      this.lookState=true;
      this.$router.push({name:'doComment', query:{mchtId:en.mchtId,couponNos:en.couponNo,orderId:en.orderId,goHome:true}});

    },
    // 跳转电子券详情
    goCouponDetl(params){
      var me =this;
        Storage.set("couponInfo",params);
        this.lookState=true;
        // this.$router.push({name:'couponDetail',query:{type:'noExchange'}});
        this.$router.push({
          name:'couDetail',
          query: {
            type:'noExchange',
            couponId: params.couponId,
            mchtId: params.mchtId,
            seq: params.seqNo||'',
            usrId: '',
            usrPicId: ''
          }
        });

    },
    //跳商券
    lookCard(){
      this.lookState=true;
      this.$router.push({name:"cardList",query:{
      	vueRouterHistory2:true
      }});
    }
  },
	filters: {
		num(val) {
			return ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][val] || val
		},
		timeAnalysis:function(value) {
				if(!value){
						return;
				};
				if (value.indexOf('null')>0) {
						value=value.substring(0,value.indexOf(','));
				}
				return value
		}
	}
}
</script>
<style scoped>
.pay_success {
  width: 100%;
  text-align: center;
}

.pay_success p {
  font-size: 1.2rem;
  color: #333;
  padding: 2rem 0 2rem;
  font-weight: bold
}

.pay_success>span {
  font-size: .85rem;
  color: #666;
  display: block;
  line-height: 1.5rem;
  margin: .5rem 0 .8rem
}

.pay_success span span {
  color: #ec4e8a
}

.pay_success a {
  display: inline-block;
  font-size: 1rem;
  color: #fff;
  background-color: #f15285;
  line-height: 2rem;
  /*padding: 0 .9rem;*/
  width: 10.5rem;
  border-radius: 3px;
  border:1px solid #f15285;
}

.gap {
  width: 100%;
  height: .7rem;
  background-color: #f5f5f5;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #f1f1f1;
}

.pay_success .okImg {
  width: 180px;
  margin: 1.2rem auto 0;
}

.okImg img {
  width: 100%;
}

.pay_success_cont {
  background-color: #fff;
  width: 100%;
}

.pay_success_cont p,
.pay_coupon_tit {
  border-bottom: 1px solid #f7f7f7;
  height: 3.2rem;
  line-height: 3.2rem;
  color: #999;
  font-size: 1rem;
  padding: 0 0.9rem;
}
.pay_coupon_tit::after, .pay_success_cont > p{
	content: "";
	display: block;
	clear: both;
}

.pay_success_cont p .right {
  color: #333;
  font-size: 1.2rem
}

.pay_coupon_tit {
  line-height: 2.6rem;
  height: 2.6rem;
  border-bottom: none;
}

.pay_coupon_cont ul {
  margin-right: 0.6rem;
  margin-bottom: 0.3rem;
}

.pay_coupon_cont li {
  margin-left: 0.6rem;
}
.look_back{
  margin-bottom:2.6rem;
}
.look_back a{
  background-color: #fff;
  color:#f15285;
  margin-top:1.5rem;
}
.activity_title{margin-bottom: 1rem;}
.activity_title p{
  color:#666;
  font-size: 1rem;
  padding: 0 0 0.6rem;
  font-weight: normal;
}
.activity_title p span{
  color:#f15285;
}
.exchange_card{position: relative;}
.exchange_card .bgLine {
    top: 8.3rem;
}
.notice {
	text-align:left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.goback{
	position: absolute;
	width: 6rem;
	height: 5rem;
	z-index: 66;
	left: 0;
	top: 0;
}
</style>
